<template>

  <view>
      <view class="videoBox" v-if="wxopenid!==''">
        <video  style="height: 100vh;width: 100%;background: transparent"
               :show-progress="true"
               :show-bottom-progress="false"
               object-fit="contain"
               :enable-progress-gesture="false"
               autoplay
               :show-fullscreen-btn="false"
               id="myVideo" :src="videoSrc"
               @error="videoErrorCallback"   controls @timeupdate="timeUpdate"></video>
        <view class="videoTime" style="display: none">
          {{currentTimeShow}}/{{durationShow}}
        </view>
      </view>

      <view style="background: transparent;width: 90%;height: 6vh;position: absolute;bottom: 0;right: 0rpx">
      </view>
<!--    <view v-else>-->
      <oauth-login type="redirectTo" login-page="/pages/live/video" @success-login="wxLogin" :ext-param="`vdid=${vdid}`" />
      <qwOauthLogin type="redirectTo" login-page="/pages/live/video" @sucess-login="qwLogin" :ext-param="`vdid=${vdid}`"/>
<!--    </view>-->

  </view>
</template>
<style>
/* 视频模块 */
.videoBox{
  position: relative;
}
.videoBox video{
  width: 100%;
}
.videoTime{
  position: absolute;
  right: 12%;
  bottom: 36rpx;
  color: #fff;
  font-size: 20rpx;
}
</style>
<script>


import qwOauthLogin from "@/components/wechat/qw-oauth-login.vue";
import oauthLogin from "@/components/wechat/oauth-login.vue";
import yzyliveRequest from "@/utils/yzylive-request";

export default {
  components: {qwOauthLogin,oauthLogin},
  data() {
    return {
      isCompiled:false,
      videoInfo:{},
      videoSrc:'',
      durationShow:'00:00',//时间总时长
      currentTimeShow:'00:00',//播放总进度时间,
      signFlag:{},
      qwopenid:'',
      wxopenid:'',
      vdid:0,
      uuid:''
    }
  },
  onLoad(query) {
    this.vdid = query?.vdid;
    this.getVideoInfo()
    // console.log
  },
  onReady: function(res) {
    // #ifndef MP-ALIPAY
    this.videoContext = uni.createVideoContext('myVideo');
    this.uuid = uni.$u.guid(20);
    // console.log(uni.$u.guid(20))
    // #endif
  },
  onShow(options) {
    // console.log('sdas')
    // console.log(this.videoContext);
  },
  onUnload(){
    this.viewingRecord();
    // console.log('close')
  },
  onHide() {
    this.viewingRecord();
    // console.log('hide')
  },
  onShareAppMessage(res) {
    return this.shares();
  },
  //2.分享到朋友圈
  onShareTimeline(res) {
    return this.shares();
  },
  methods: {
    shares(){
      return Object.assign(this.getShare(),{title:this.videoInfo.title,imageUrl:this.videoInfo.poster_full});
    },
    getVideoInfo(){
      yzyliveRequest({
        url: 'api/video/info', //仅为示例，并非真实接口地址。
        data: {vdid:this.vdid},
      }).then((res)=>{
        // console.log(res)
        if (res?.code === 1){
          this.videoInfo = res.data;
          this.videoSrc = res.data.video_link;
          // console.log(res);
          uni.setNavigationBarTitle({ title: this.videoInfo.title })

        }
      });
    },
    viewingRecord(){
      if (this.wxopenid ==='' || this.qwopenid ===''){
        return
      }
      yzyliveRequest({
        url: 'api/video/viewing_record', //仅为示例，并非真实接口地址。
        data: {
          req_id:this.uuid,
          vdid:this.vdid,
          qwopenid:this.qwopenid,
          wxopenid:this.wxopenid
        },
      }).then(function (res){
        if (res.code === 0){
         /* uni.showToast({
            title: '保存观看记录错误，请重新观看',
            icon: 'none', // 设置为none表示不显示图标
            duration: 2000 // 持续时间，单位为ms，默认为1500
          });*/
        }
      });
    },
    qwLogin:function (qwopenid) {
      this.qwopenid = qwopenid
    },
    wxLogin(openid){
      this.wxopenid = openid;
    },
    timeUpdate: function (e) {
      let sec = parseInt(e.detail.currentTime % 3);
      let current = parseInt(e.detail.currentTime);
      if ((typeof this.signFlag[current] === "undefined") && sec === 0){
        this.signFlag[current] = e.detail.currentTime;
        this.signing();
      }
      if (!this.isCompiled &&  e.detail.currentTime / e.detail.duration  > 0.90){
        this.isCompiled = true;
        this.viewingRecord();
       /* uni.showModal({
          content: `你观看进度已达90%，${e.detail.currentTime},总${e.detail.duration}`,
          showCancel: false
        })*/
      }

    },

    signing(){
      // setTimeout(()=>{
        yzyliveRequest({
          url: 'api/video/signing', //仅为示例，并非真实接口地址。
          // method:'post',
          data: {
            req_id:this.uuid,
            vdid:this.vdid,
            qwopenid:this.qwopenid,
            wxopenid:this.wxopenid
          },
        });
      // },3000);
    },
    videoErrorCallback: function(e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false
      })
    },

  }
}
</script>
